<template>
  <div class="competition-table" id="Print">
    <div v-for="item in match" :key="item.id">
      <h2>{{ item.title }}</h2>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="teamName" label="单位" width="200" />
      <el-table-column prop="userName" label="姓名" width="100" />
      <el-table-column prop="sex" label="性别" width="80" />
      <el-table-column prop="groupname" label="组别" width="120" />
      <el-table-column prop="projectName" label="项目" width="120" />
      <el-table-column label="套路名称" width="200" >
        <template #default="{ row }">
          {{ getroutineid(row.routineid) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 打印按钮 -->
  <el-button type="primary" v-print="printConfig" class="print-button-container">打印</el-button>
  <el-button type="primary" @click="handleCancel" class="print-button-container">取消</el-button>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

const matchid = route.query.matchid;

const token = localStorage.getItem('adminToken');

const match = ref({});

const tableData = ref();

const routineid = ref([]);

//获取所有套路申报
async function fetchroutine() {  
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/api/Routineid`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    routineid.value = response.data.data;
  } catch (error) {
    console.log(error)
  }
}



// 获取当前比赛信息
async function fetchmatch() {
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/match/${matchid}`, {
      headers: {
        'Authorization': `Bearer  ${token}`
      }
    })

    match.value = response.data.match;

  } catch (error) {
    console.log(error)
  }
}



// 获取当前比赛下的报名信息
async function fetchItems() {
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/teamproject/project/memo/${matchid}`, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    tableData.value = response.data; 
  } catch (error) {
    console.log(error)
  }
}



function getroutineid(id) {
  const maproutine = new Map();
   routineid.value.forEach(routine => {
    maproutine[routine.id] = routine.memo
  })
  return maproutine[id];
}

//返回按钮
function handleCancel() {
  router.push({ path: '/admin/viewproject', query: { id: matchid } });
}

onMounted(() => {
  getroutineid();
  fetchItems();
  fetchmatch();
  fetchroutine();
})

// 使用vue3-print-nb进行打印
const printConfig = {
  id: 'Print',
  extraCss: 'https://cdn.example.com/print-style1.css, https://cdn.example.com/print-style2.css',
}
</script>

<style scoped>
.competition-table {
  text-align: center;
  margin: 0 auto;
  /* 使表格居中 */
  max-width: 100%;
  /* 确保表格不超过容器宽度 */
}

.print-button-container {
  width: 100px;
  margin-left: 48%;
  margin-top: 10px;
}

@media print {
  .difficulty-table {
    width: 100%;
  }

  .el-table {
    width: 100% !important;
  }

  .el-table__body-wrapper {
    overflow: visible !important;
  }

  .print-button-container {
    display: none;
  }

  /* 其他打印时的样式调整 */
}
</style>